<template>
  <div class="motherboard-wrapper">
    <AsyncLoadComponent v-if="pageConfig && motherName" :component="motherName" path="/mother-set/modules" />
  </div>
</template>

<script setup>
/**
 * 母版
 * @author 朱琦
 * @date   时间：2023/2/10
 */
import pageApi from '@/api/management/page'
import { ref, onMounted, watch, computed, markRaw, shallowRef, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import AsyncLoadComponent from './components/async-load-component'
import Loading from 'bComponent/components/loading'

const route = useRoute()
const router = useRouter()
const store = useStore()
const isLoading = shallowRef(true)
const { proxy } = getCurrentInstance()

// 页面数据
const pageData = shallowRef({})

// 是否有菜单组件
const hasMenu = ref(false)
// 当前菜单组件的路由名
// const currentRouteName = ref(null)
// 是否有详情
const hasDetail = ref(false)
const currentDetailConfig = ref({
  map: null,
  panel: null
})
// 详情（地图上）配置
const detailMapConfig = ref(null)
// 详情（面板上）配置
const detailPanelConfig = ref(null)

// 页面配置
const pageConfig = computed(() => store.getters['config/pageConfig'])
// 详情配置
const detailConfig = computed(() => store.getters['config/detailConfig'])

// 页面id
const pageId = computed(() => route.params.id)

// 母版名
const motherName = ref(null)

// 页面状态
const pageStatus = computed(() => route.params.status)

onMounted(() => {
  getData()
})

/**
 * 获取页面配置数据
 */
const getData = () => {
  pageApi.getPageDetail(pageId.value).then(res => {
    if (res.data && (res.data.pageStatus === 1 || pageStatus.value === 'preview')) {
      const config = JSON.parse(res.data.pageConfig)
      pageData.value = res.data
      motherName.value = res.data.route
      if (res.data.logoPath) {
        const $favicon = document.querySelector('link[rel="icon"]')
        $favicon.href = res.data.logoPath
      }
      // 保存 页面配置
      store.commit('config/SET_PAGE_CONFIG', config)
      store.commit('config/SET_PAGE_DATA', res.data)
    } else {
      // 页面暂时未发布 不可访问
      router.replace('/404')
    }
  })
}
</script>

<style scoped lang="less">
@import url(~@/assets/styles/transition.less);

.motherboard-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  // 禁止选择文字
  user-select: none;
}
</style>
